%header-a {
    height: px2rem($header-height);
    line-height: px2rem($header-height);
    color: inherit;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba($color: #282c48, $alpha: 0.7);
    z-index: $zindex-fixed;

    > .inner {
        display: flex;
        justify-content: center;
        margin: auto;
        width: $min-width;
        color: #fff;
    }

    .brand {
        @extend %header-a;
        > img {
            height: px2rem(35px);
            vertical-align: middle;
        }
    }

    ul {
        margin-left: px2rem(40px);
        list-style-type: none;

        li {
            float: left;
        }

        a {
            @extend %header-a;
            display: block;
            padding: 0 px2rem(14);
            font-size: px2em(20px);
            text-decoration: none;

            &.active,
            &:hover {
                border-bottom: 3px solid rgba($color: #0f73cf, $alpha: 0.7);
            }

            &.active {
                font-size: px2em(24px);
            }
        }
    }
}
